<!DOCTYPE html> 
<html>
<head>
	<title>Grid Row DnD - Drag from/to Non-Grid Source</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
	<link rel='stylesheet' href="support/common.css" />
	<style type="text/css">
		.gridContainer {
			width: 500px;
			height: 400px;
			margin: 10px;
		}

		.gridx {
			height: 100%;
		}

		#draggableItems {
			width: 500px;
			height: 400px;
			border: 3px solid #ccc;
			radius: 8pt;
			-moz-border-radius: 8pt 8pt;
			overflow: scroll;
		}

		.songItem {
			display: inline-block;
			border: 2px solid #aaa;
			font-weight: bold;
			margin: 5px;
			padding: 3px;
			radius: 5pt;
			-moz-border-radius: 5pt 5pt;
			position: relative;
		}

		.songItemId {
			color: red;
			float: left;
		}

		.songItemName {
			color: blue;
			display: block;
			text-align: center;
			margin-left: 20px;
		}

		.songItemArtist {
			display: block;
			text-align: center;
		}

		.songItem:hover {
			background-color: #33ffff;
		}

		.dojoDndItemAnchor, .dojoDndItemSelected {
			background-color: #abcdef;
		}
	</style>

	<script type="text/javascript" src="../../dojo/dojo.js" 
		data-dojo-config="async: true, parseOnLoad: true,  packages:[{name: 'gridx', location:'../gridx'}]"></script>
	<script type="text/javascript" src='support/common.js'></script>
	<script type="text/javascript" src='test_grid_dndrow_nongrid_source.js'></script>
</head>
<body class='claro'>
	<h1 class='title'>Grid Row DnD - Drag from/to Non-Grid Source</h1>
	<table border='0' cellspacing='0' cellpadding='0'>
		<tr>
			<td>
				<div id='draggableItems'></div>
			</td>
			<td>
				<div id='grid1Container' class='gridContainer'></div>
			</td>
		</tr>
	</table>
</body>
</html>
